<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="organization" />
        </el-tabs>
        <div class="tree-card">
          <TreeTool :data="company" :is-root="true" />
          <hr>
          <el-tree :data="depts" :props="defaultProps" :default-expand-all="true" :expand-on-click-node="false">
            <TreeTool slot-scope="scope" :data="scope.data" />
          </el-tree>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTool from './components/tree-tool'
import { getDepartments } from '@/api/departments'
import { convertTreeData } from '@/utils'
export default {
  components: {
    TreeTool
  },
  data() {
    return {
      depts: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      company: {
        name: '',
        manager: '负责人'
      },
      activeName: 'organization'
    }
  },
  created() {
    getDepartments().then(res => {
      this.company.name = res.companyName
      this.depts = convertTreeData(res.depts, '')
    })
  }

}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
.el-tabs{
  padding-left:20px;
  padding-top: 20px;
}
</style>
